<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot-超级文件带师-文件上传</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<style>
    /* table 样式 */
    table {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    table td,
    table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 3px 5px;
    }
    table th {
        border-bottom: 2px solid #ccc;
        text-align: center;
    }

    /* blockquote 样式 */
    blockquote {
        display: block;
        border-left: 8px solid #d0e5f2;
        padding: 5px 10px;
        margin: 10px 0;
        line-height: 1.4;
        font-size: 100%;
        background-color: #f1f1f1;
    }

    /* code 样式 */
    code {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 3px 5px;
        margin: 0 3px;
    }
    pre code {
        display: block;
    }

    /* ul ol 样式 */
    ul, ol {
        margin: 10px 0 10px 20px;
    }
    .el-header, .el-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        text-align: center;
        background-color: white;

    }
    .el-header{
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border: 1px solid #ebeef5;
        height: auto !important;
    }
    .el-footer{
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border: 1px solid #ebeef5;

    }
    .el-container{
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .el-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        text-align: center;
        background-color: white;
    }
    .box-card{
        line-height: 30px;
    }
    .el-upload{
        width: 100%;
    }
    .el-upload-dragger {
        width: 100%!important;
        padding: 40px!important;
        padding-top:0px!important;
    }
    @media screen and (max-width: 750px) {
        .el-message-box {
            width: 60% !important;
        }
        .el-dialog{
            width: 90% !important;
        }
    }
    body{
        margin: 0px;
        display: flex;
        background: rgb(121, 187, 255);
        justify-content: center;
    }
</style>
<body>
<div id="content" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
    <div style="position: absolute;z-index: 999;background-color: black;color: white;width: 100vw;height: 100vh;top: 0px;left: 0px;flex-direction: column;justify-content: center;
    align-items: center;display: none;"  id="tips">
        <h1>您好，拥抱新的特性！</h1>
        <p>由于微信的浏览器内核版本过旧，不支持新特性，（手机端不受影响）目前暂无适配微信PC端浏览器的计划。</p>
        <p>请点击左上角的“用默认浏览器打开”</p>
        <img src="img/tips.jpg" style="width: 300px;"/>
    </div>
    <el-dialog
            title="恭喜你！"
            :visible.sync="dialogVisible"
            width="30%"
            >
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <p >感谢您！上传成功~超级文件带师为你文件保驾护航。</p>
            <span style="color: #cccccc;font-size:10px;">*广告</span>
            <div v-html="poster.confirm_content">

            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <el-container style="max-width: 700px;margin: 20px;">
        <el-header><h1>{{Dir.name}}</h1></el-header>
        <el-main style="text-align: left;">
            <span v-html="Dir.intro" style="margin: 10px;"></span>

            <h1 v-if="Dir.collect==0" style="color: #ff0000;text-align: center;">文件夹已停止收集</h1>
            <div v-if="Dir.collect==1">
                <el-progress v-if="uploadpercent>0" :text-inside="true" :stroke-width="26" :percentage="uploadpercent" style="margin: 20px;"></el-progress>
                <el-upload
                        style="text-align: center;"
                        class="upload-demo"
                        drag
                        :multiple="false"
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="getFileStatus"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">{{tips}}</div>
                </el-upload>
                <div v-if="Dir.title1!=null && Dir.title1!=''" style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">{{Dir.title1}}:</span>
                    <el-input v-model="form.title1"></el-input>
                </div>
                <div v-if="Dir.title2!=null && Dir.title2!=''" style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">{{Dir.title2}}:</span>
                    <el-input v-model="form.title2"></el-input>
                </div>
                <div v-if="Dir.title3!=null && Dir.title3!=''"  style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">{{Dir.title3}}:</span>
                    <el-input v-model="form.title3"></el-input>
                </div>
                <div  style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                    <el-button type="primary" round style="margin: 20px;width: 150px;" @click="Fileupload">立即上传</el-button>
                </div>

            </div>

            <div  style="">
                <div v-html="poster.rev_content">

                </div>
            </div>
        </el-main>
        <el-footer>SpringBoot-SuperDir - power by xiaoxi</el-footer>
    </el-container>
</div>
<script>
    isWechat();
    function isWechat() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            var system = {
                win: false,
                mac: false
            };
            //检测平台
            var p = navigator.platform;
            system.win = p.indexOf("Win") == 0;
            system.mac = p.indexOf("Mac") == 0;
            if (system.win || system.mac) {
                var Element = document.getElementById('tips');
                Element.style.display = 'flex';
            }
        } else {
            return false;
        }
    }
</script>
<script>

    var app = new Vue({
        el: '#content',
        data: {
            Dir:{},
            form:{},
            tips:'',
            uploadpercent:0,
            dialogVisible:false,
            poster:{}
        },
        mounted:function(){
            this.getDir();
            this.getPoster();
        },
        methods:{
            getPoster:function(){
                axios.get('Dir_getOnePoster',{
                    params: {
                    }
                })
                    .then(res => {
                        console.log('数据是:', res);
                        app.poster=res.data.data;
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            Fileupload:function(){
                app.uploadpercent=0;
                let type = app.tips.split('.').pop();
                let name = ""
                var flag = false
                if(app.form.title1!=null && app.form.title1!=""){
                    name = name+ app.form.title1 ;

                }else{
                    if(app.Dir.title1!=null && app.Dir.title1!=''){
                        flag=true
                    }
                }
                if(app.form.title2!=null && app.form.title2!=""){
                    name = name+'-'+ app.form.title2;
                }else{
                    if(app.Dir.title2!=null && app.Dir.title2!=''){
                        flag=true
                    }
                }
                if(app.form.title3!=null && app.form.title3!=""){
                    name = name+'-'+ app.form.title3 ;

                }else{
                    if(app.Dir.title3!=null && app.Dir.title3!=''){
                        flag=true
                    }
                }
                if(app.file==undefined){
                    flag=true
                }
                if(flag){
                    this.$alert('有些字段没填写或文件未选择，请先确保填写完成。', '未填写', {
                        confirmButtonText: '确定',
                        callback: action => {

                        }
                    });
                    return
                }
                console.log(name+'.'+type);

                let formData = new FormData()
                formData.append('id',app.Dir.id);
                formData.append('name', name+'.'+type);
                formData.append('file',app.file.raw);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
                    },
                    onUploadProgress: progressEvent => {
                        let complete = (progressEvent.loaded / progressEvent.total * 100 | 0);
                        app.uploadpercent=complete;
                    }
                }
                app.load = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0)'
                });
                axios.post('FileUpload', formData, config,).then(res => {
                    console.log(res);
                    if(res.data.data.result=='success'){
                        app.dialogVisible=true;
                        // this.$alert('感谢您！上传成功~超级文件带师为你文件保驾护航。', '恭喜你！', {
                        //     confirmButtonText: '确定',
                        //     callback: action => {
                        //
                        //     }
                        // });
                    } else if(res.data.data.result=='file_exists'){
                        this.$alert(name+'.'+type+'文件已存在，请注意是否命名正确，如果您确定需要更新先前上传的文件，请联系管理员。', '文件被拒收', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        });
                    }else if(res.data.data.result=='inactive'){
                        this.$alert('抱歉，该文件夹已停止收集。', '文件被拒收', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        });
                    }else{
                        this.$alert('发生了意外，文件无法传达！请联系管理员。', '传输错误', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        });
                    }
                    app.load.close();
                }).catch((e) => {
                    this.$alert('发生了异常，原因是：'+e+',文件未上传成功。', '网络或设备异常', {
                        confirmButtonText: '确定',
                        callback: action => {

                        }
                    });
                    app.load.close();
                });
            },
            getFileStatus:function(file, fileList){
                console.log(file);
                app.file = file;
                app.tips=file.name;
            },
            getUrlParam:function(name){
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            },
            getDir:function(){
                axios.get('Dir_getDir',{
                    params: {
                        id:this.getUrlParam("id")
                    }
                })
                    .then(res => {
                        console.log('数据是:', res);
                        app.Dir = res.data.data;
                        document.title = '请你提交关于['+app.Dir.name+"]的文件啦！";
                        if(res.data.data.collect==0){
                            this.$alert('抱歉，该文件夹已停止收集。', '温馨提示', {
                                confirmButtonText: '确定',
                                callback: action => {

                                }
                            });
                        }
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            }
        }
    })
</script>

</body>
</html>